<template>
  <div class="ListView">
    <!-- 头部区域 -->
    <ListViewTop :playlist="state.playlist"></ListViewTop>
    <!-- 播放列表 -->
    <PlayList :playlist="state.playlist"></PlayList>
  </div>
</template>

<script setup>
import ListViewTop from '@/components/ListViewTop.vue'
import PlayList from '@/components/playList.vue'
import { getPlaylistDetail } from '@/network/recommendSongList/songListDetail.js'
import { onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'

// 推荐歌单状态
const state = reactive({
  songsList: [],  // 列表
  playlist: {
    //预先创建信息对象，否则传数据时会报错，拿不到数据
    creator: {}, 
    tracks: {}
  },
})

const store = useStore()
const route = useRoute()

// 获取推荐歌单列表数据
const getSongList = async () => {
  const {data: res} = await getPlaylistDetail(route.query.id)
  state.playlist = res.playlist
  // 将歌单列表保存一份到 store 中
  store.commit('setPlaylist', state.playlist.tracks)
  // console.log(state.playlist);
}

onMounted(() => {
  getSongList()
})

</script>

<style lang="less" scoped>

</style>